import React  from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import finalCreateStore from './store/index';
import reducer from './reducers/index'
import { Router,Route,hashHistory,IndexRoute } from 'react-router';

import { syncHistoryWithStore } from 'react-router-redux'; // sync History with store

import DevTools from './store/DevTools';

import App from './modules/App'
import AboutShow from './modules/About'
import HomeShow from './modules/Home'
import CounterContext from './modules/Counter'
import CartsContext from './modules/Carts'
import NewsDetails from './modules/NewsDetails'

const store = finalCreateStore(reducer);
const history = syncHistoryWithStore(hashHistory,store); 

ReactDOM.render(
        <Provider store={store}>
             <div>
                <Router history={history}>
                    <Route path="/" component={App}>
                        <IndexRoute component={HomeShow}/>
                        <Route path="/about" component={AboutShow}></Route>
                        <Route path="/counter" component={CounterContext}/>
                        <Route path="/carts" component={CartsContext}/>
                        <Route path="/about/:newsId" component={NewsDetails}/>
                    </Route>
                </Router>
                {<DevTools/>}
            </div>
        </Provider>
    ,
    document.getElementById('app')
)